<template>
  <div
    v-if="isShow"
    class="app"
  >
    <div
      class="top"
      @click="forword"
    >
      <div class="topLeft">
        <div class="radius">
          <img
            :src="userData.head_img.indexOf('http')>-1?userData.head_img:('http://localhost:3000' + userData.head_img)"
            alt=""
            v-if="userData.head_img"
          />
          <img
            src="../../assets/logo.png"
            alt=""
            v-else
          />
        </div>
        <div>
          <p>
            <span
              class="iconfont iconxingbienan"
              v-if="userData.gender == 1"
            ></span>
            <span
              class="iconfont iconxingbienv"
              v-else
            ></span>
            {{ userData.nickname }}
          </p>
          <span class="date">{{ userData.create_date | dataFormat }}</span>
        </div>
      </div>
      <div class="jiantou">
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
    <div class="bottom">
      <divBar
        textLeft="我的关注"
        textRight="关注的用户"
        @handleClick="$router.push({ name: 'attention' })"
      ></divBar>
      <divBar
        textLeft="文档跟帖"
        textRight="跟帖/回复"
        @handleClick="$router.push({ name: 'reply' })"
      ></divBar>
      <divBar
        textLeft="我的收藏"
        textRight="文章/视频"
        @handleClick="$router.push({ name: 'collect' })"
      ></divBar>
      <divBar
        textLeft="设置"
        @handleClick="$router.push({ name: 'setting' })"
      ></divBar>
      <divBar
        textLeft="退出登录"
        @handleClick="handleToken"
      ></divBar>
    </div>
  </div>
</template>

<script>
import dataFormat from '../../filters/dataFormat'
import divBar from '../../components/ProjectBar'
export default {
  data () {
    return {
      userData: '',
      isShow: false
    }
  },
  filters: {
    dataFormat
  },
  components: {
    divBar
  },
  methods: {
    forword () {
      this.$router.push({ name: 'edit' })
    },
    handleToken () {
      // 清除localStorage的数据
      localStorage.removeItem('token')
      localStorage.removeItem('userId')
      // 使用replace替换最后跳转的那个路由
      this.$router.replace({ name: 'home' })
    }
  },
  created () {
    this.$axios({
      url: `/user/${window.localStorage.getItem('userId')}`,
      method: 'GET'
      // headers: {
      // Authorization: "Bearer " + localStorage.getItem("token")
      // }
    }).then(res => {
      // console.log(res)
      // console.log(window.localStorage.getItem("userId"))
      // console.log(res.data.data)
      if (res.data.data) {
        this.isShow = true
        this.userData = res.data.data
      }
    })
    // .catch(err => {
    // this.$toast.fail("用户信息验证失败")
    // })
  }
}
</script>

<style lang="less" scoped>
.app {
  height: 100vh;
}
.top {
  height: 120/360 * 100vw;
  padding-left: 20/360 * 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 5px solid #ccc;
  padding: 0 20/360 * 100vw;
  .topLeft {
    display: flex;
    align-items: center;

    .radius {
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .iconxingbienan {
    color: rgb(57, 138, 230);
    font-size: 18/360 * 100vw;
  }
  .iconxingbienv {
    font-size: 18/360 * 100vw;
    color: rgb(197, 18, 152);
  }
  .date {
    color: #a0a0a0;
  }
  img {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
  }
}
</style>
